<template>
  <el-form
    ref="form"
    :model="form"
    label-width="120px"
    :rules="rules"
    :validate-on-rule-change="false"
  >
    <template v-for="(edit, index) in editList">
      <el-form-item
        :key="index"
        :label="edit.label"
        :prop="edit.key"
        v-if="!edit.isforze"
      >
        <el-input
          v-if="edit.type === 'input'"
          v-model="form[edit.key]"
          :disabled="edit.disabled"
          :placeholder="edit.placeholder"
        />
        <el-input
          v-else-if="edit.type === 'textarea'"
          v-model="form[edit.key]"
          type="textarea"
          :placeholder="edit.placeholder"
        />
        <el-checkbox
          v-else-if="edit.type === 'checkbox'"
          v-model="form[edit.key]"
          >{{ edit.label }}</el-checkbox
        >
        <el-radio-group
          v-else-if="edit.type === 'radio'"
          v-model="form[edit.key]"
          @change="(val) => changeHandle(val, edit)"
        >
          <el-radio
            v-for="item in edit.data"
            :key="item.value"
            :label="item.value"
            >{{ item.title }}</el-radio
          >
        </el-radio-group>
        <el-select
          v-else-if="edit.type === 'select'"
          v-model="form[edit.key]"
          filterable
          :placeholder="edit.placeholder"
        >
          <el-option
            v-for="item in edit.options"
            :key="item.value"
            :label="item.title"
            :value="item.value"
          />
        </el-select>
        <div v-else-if="edit.type === 'select-group'" class="select-group">
          <el-select
            v-for="item in edit.data"
            :key="item.key"
            v-model="form[item.key]"
            placeholder="请选择"
          >
            <el-option
              v-for="item2 in item.data"
              :key="item2.key"
              :label="item2.key"
              :value="item2.value"
            >
            </el-option>
          </el-select>
        </div>
        <template v-else-if="edit.type === 'input-checkbox'">
          <div class="input-checkbox">
            <el-input
              v-model="form[edit.key]"
              type="input"
              :disabled="form[edit.key1]"
              :placeholder="edit.placeholder"
            />
            <el-checkbox
              @change="(value) => (form[edit.key] = value ? '0' : '')"
              v-model="form[edit.key1]"
              >{{ edit.name }}</el-checkbox
            >
          </div>
        </template>

        <template v-else-if="edit.type === 'link'">
          <el-select
            v-model="form[edit.key]"
            class="w1"
            :placeholder="edit.placeholder"
            @change="form[edit.key1] = ''"
          >
            <el-option
              v-for="item in edit.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="form[edit.key1]"
            class="w1 m1"
            :placeholder="edit.placeholder"
          >
            <el-option
              v-for="item in edit[`options${form[edit.key]}`]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      
      <el-upload
        v-else-if="edit.type === 'upload'"
        :class="['upload-box',upStatu == 1 ? '' : 'br1']"
        :action="`${apiUrl}/oss/file-anon/upload`"
        list-type="picture-card"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-progress="onProgress"
        :on-error="onError"
        :on-remove="handleRemove"
        :file-list="[{url:form[edit.key] || imageUrl}]"
      >
        <el-progress v-if="upStatu == 1" type="circle" :width="100" :percentage="upProgress" />
        <el-image v-else-if="form[edit.key]" style="width:140px;height:140px;" :src="form[edit.key] || imageUrl" fit="fit" />
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
        <slot v-else-if="edit.type === 'slot'" :edit="edit" :name="edit.name" />
      </el-form-item>
    </template>
    <slot />
  </el-form>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default() {
        return {};
      },
    },
    rules: {
      type: Object,
      default() {
        return {};
      },
    },
    editList: {
      type: Array,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      imageUrl: "",
      apiUrl: "",
      upStatu: 0, // 1上传中
      upProgress: 0,
      progressNum: 10,
      realityPro: 0,
      disabled: false,
    };
  },
  created() {
    this.apiUrl = process.env.VUE_APP_BASE_API;
  },
  methods: {
    handleRemove() {},
    onProgress(event) {
      this.upStatu = 1;
      this.realityPro = event.percent;
    },
    onError() {
      setTimeout(() => {
        this.$message.error("图片上传失败");
        this.upStatu = 0;
      }, 500);
    },
    removeImageUrl() {
      this.imageUrl = "";
    },

    ruleFrom() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("on-submit");
        } else {
          return false;
        }
      });
    },
    // 重置验证
    resetForm() {
      this.$refs.form.resetFields();
    },
    handleAvatarSuccess(res, file) {
      // this.upStatu = 0
      this.$message.success("图片上传成功");
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$emit("uploade", res.data.url, {
        headers: { files: [res.data.id] },
      });
    },
    getUpProgress() {
      setTimeout(() => {
        this.upProgress += 100 / this.progressNum;
        if (this.upProgress > this.realityPro)
          this.upProgress = Math.floor(this.realityPro);
        if (this.upProgress < 100) {
          this.getUpProgress();
        } else {
          this.upStatu = 0;
        }
      }, 100);
    },
    beforeAvatarUpload(file) {
      this.upProgress = 0;
      this.upStatu = 0;
      this.realityPro = 0;

      this.getUpProgress();
      return true;
    },
    //
    changeHandle(value, edit) {
      if (edit.change) edit.change(value);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-textarea__inner {
  height: 100px;
}
.el-select {
  width: 100%;
}
.w1 {
  width: 49%;
}
.m1 {
  margin-left: 2%;
}
.br1 {
  border: 1px solid #dcdfe6;
}
.upload-box {
  width: 148px;
  height: 148px;
  text-align: center;
  line-height: 100px;
  border-radius: 6px;
}
::v-deep .el-upload--text {
  width: 100%;
  height: 100%;
}
.upload-box:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 26px;
  color: #8c939d;
}
.input-checkbox {
  display: inline-block;
}
.el-checkbox {
  display: inline-block;
}
</style>
